<template>
    <div class="my container">
        
        <ul>
            <li>
                <img v-show="flag" src="../../assets/bg1.png" alt="">
                <img v-show="!flag" src="../../assets/bg3.png" alt="">


                <div class="text">
                    <h3 v-show="!flag">游客</h3>
                    <h3 v-show="flag">{{userdata?.nick}}</h3>

                    
                </div>
            </li>
        </ul>
        <div class="my-txt" @click="goAddress()">编辑收货地址<span style="float: right; font-size: 25px; margin-right: 20px;">&gt;</span></div>
    <div class="my-txt" @click="goOrder()">查看订单 <span style="float: right; font-size: 25px; margin-right: 20px;">&gt;</span></div>
    <van-button  v-show="!flag" class="btn" plain type="primary "  @click="gologin()">登录</van-button>
    <van-button v-show="flag" class="btn" plain type="primary "  @click="leavelogin()">退出登录</van-button>

    <div class="address-txt" v-show="shows" @click="shows=false">请先登录您的账号   <button class="btns">关闭</button></div>
    </div>
</template>
<script>
import { get } from '../../utils/local'
import { clear } from '../../utils/local'

export default {
    components: {//注册组件
        
    },
    props: {},
    data() {
        return {
          userdata:[],
          flag:false,
          shows: false,
        };
    },
    computed: {
        
    },
    created() {//创建
        
    },
    mounted() {//挂载
        this.getdata();
    },
    methods: {//方法
        getdata(){
            // console.log(get("userinfo"));
            this.userdata = get("userinfo");
            if(get("userinfo")){
             this.flag=true;
           }
    },
        gologin(){
           this.$router.push({path:"/login"});
    },
         leavelogin(){
            clear();
            location.reload();
         },
    goAddress(){
        this.$router.push({path:"/addrlist"});
           if(!get("userinfo")){
             this.shows=true;
           }
           
    },
    goOrder(){
        this.$router.push({path:"/order"});
    }

    
    },
    watch: {
        
    },
};
</script>
<style scoped lang="less">
.my{
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/bg2.png);
    background-size: 100% 100%;
}
.container ul{
    list-style: none;
    text-align: center;
}
.container li{
    width: 320px;
    height: 320px;
    display: inline-block;
    margin: 5px;
    text-align: left;
    position: relative;
}
.container li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 10;
    border-radius: 50%;
    /* 设置transform的过渡 */
    /* transition: transform 0.35s; */
    transform: scale(0.45);
    border: 15px solid rgba(150, 191, 183);

}
/* 文本层 */
.container li .text{
    width: 100%;
    height: 100%;
    /* background-color: rgba(58, 164, 48,0.2); */
    color: #b7ccde;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    /* 默认缩小0.7倍、不透明度为0 */
    transform: scale(0.7);
    opacity: 0;
    /* 设置过渡 */
    transition: 0.35s;
}
.container li h3{
    color: #fff;
}

/* 悬停时文本层变化 */
.container li:hover .text{
    transform: scale(1);
    opacity: 1;
}
.my-txt{
  margin: auto;
  width: 100vw;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  box-sizing: border-box;
  padding-left: 25px;
  background: rgba(255, 255, 255,0.3);
  color: aliceblue;
  margin-top: 20px;
  border-radius: 20px;
  border: 1px solid rgb(35, 135, 83);
}
.my-txt:hover{
  background: rgba(255, 255, 255,0.5);  
}
.btn{
    width: 100vw;
    margin-top: 80px;
    background:  rgba(255, 255, 255,0.3);
    font-size: 18px;
    color: aliceblue;
    border-radius: 20px;
}
.address-txt{
    width: 80vw;
    height: 40px;
    background:  rgba(213, 122, 122, 0.3);
    text-align: center;
    line-height: 40px;
    color: white;
    position: absolute;
    top: 40%;
    left: 10%; 
    border-radius: 10px;
    .btns{
        height: 40px;
        float: right;
        margin-right: 20px;
        background:  rgba(213, 122, 122, 0);
        border: none;
    }
}


</style>
